.breakpoint-editor {
  &-label {
    -fx-font-size: 13px;
    -fx-text-fill: -df-text;
    -fx-font-family: $default-font;
  }
  &-header {
    -fx-font-size: 130%;
  }
  &-background {
    -fx-background-color: -df-component-dark;
    -fx-border-color: -df-component-lighter;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 12, 0, 0, 8);
  }
  &-content {
    -fx-padding: 8px 12px;
    -fx-min-width: 340px;
    -fx-hgap: 12px;
    -fx-vgap: 8px;
  }
  &-checkbox {
      -fx-text-fill: -df-text;
      .label {
          -fx-text-fill: -df-text;
      }
  }
  &-arrow {
    -fx-shape: "M 1,0 L 0,-1 L 0,0";
    -fx-background-color: -df-component-dark;
    -fx-border-color: -df-component-lighter;
  }
  &-button {
    -fx-background-color: -df-component-dark;
    -fx-border-color: -df-component-darker;
    &:hover {
      -fx-background-color: -df-component-lighter;
    }
  }
}